<template>
    <div>
        <!-- 使用 Element UI 的单选按钮组件 -->
        <el-radio-group v-model="radio1" @input="inputHand()">
            <!-- 设置两个单选按钮，label 分别为 "列表" 和 "统计图" -->
            <el-radio-button label="列表"></el-radio-button>
            <el-radio-button label="统计图"></el-radio-button>
        </el-radio-group>
        <!-- 如果选中的是 "统计图" -->
        <div v-if="radio1 === '统计图'">
            <!-- 使用自定义的 BarEcharts 组件，并传入 zaiyun 和 xinzeng 数据 -->
            <BarEcharts
                :zaiyun="{ name: '在运', data: zaiyun }"
                :xinzeng="{ name: '新增', data: xinzeng }"
            />
        </div>
        <!-- 如果选中的是 "列表" -->
        <div v-else>列表</div>
    </div>
</template>

<script>
import BarEcharts from "./BarEcharts.vue";
export default {
    data() {
        return {
            radio1: "列表", // 选中的单选按钮的值，默认为 "列表"
            zaiyun: [20, 30, 40, 60, 20, 50, 40, 30, 30, 50, 40, 30], // 在运数据
            xinzeng: [50, 40, 70, 15, 30, 45, 25, 60, 70, 30, 10, 65], // 新增数据
        };
    },
    components: {
        BarEcharts, // 注册自定义组件 BarEcharts
    },
    methods: {
        inputHand() {
            if (this.radio1 === "统计图") {
                // 如果选中的是 "统计图"
                let zaione = this.zaiyun[0];
                this.zaiyun.shift();
                this.zaiyun.push(zaione);
                let xinzengone = this.xinzeng[0];
                this.xinzeng.shift();
                this.xinzeng.push(xinzengone);
            }
        },
    },
};
</script>
